import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { BOX3_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { Map } from "@antv/l7-maps";
import data from "./cangzhou";
import { useEffect } from "react";

export function Box3({ hasTitle = true }) {
  const joined = [
    {
      ylt_name: "新华田俊生牙科诊所",
      longitude: "116.876555407901",
      latitude: "38.3269351902647",
    },
    {
      ylt_name: "运河晓云诊所",
      longitude: "116.864830724385",
      latitude: "38.3282457695032",
    },
    {
      ylt_name: "泊头市泊头镇宋屯子村卫生室",
      longitude: "116.645490359538",
      latitude: "38.1044721779887",
    },
    {
      ylt_name: "任丘出岸镇百尺村王奇志诊所",
      longitude: "115.968618715398",
      latitude: "38.7375123115103",
    },
    {
      ylt_name: "黄骅市黄骅镇大街南村卫生所",
      longitude: "117.357012313301",
      latitude: "38.3687218364012",
    },
    {
      ylt_name: "河间安定医院（普通合伙）",
      longitude: "116.120356024656",
      latitude: "38.4593751035662",
    },
    {
      ylt_name: "沧县旧州镇北关村卫生室",
      longitude: "117.022499421054",
      latitude: "38.2243735579238",
    },
    {
      ylt_name: "青县清州镇八里庄第一村卫生室",
      longitude: "116.880894133683",
      latitude: "38.5912397603812",
    },
    {
      ylt_name: "东光县东光镇北关村李金良卫生室",
      longitude: "116.546698612773",
      latitude: "37.8977503453143",
    },
    {
      ylt_name: "海兴县苏基镇安常丰村卫生室",
      longitude: "117.50327646362",
      latitude: "38.1245396271076",
    },
    {
      ylt_name: "盐山爱尔康明眼科医院有限公司",
      longitude: "117.22304657531",
      latitude: "38.0513304805353",
    },
    {
      ylt_name: "肃宁建伟卫生所",
      longitude: "115.848138519383",
      latitude: "38.4376410527241",
    },
    {
      ylt_name: "南皮保民中医医院",
      longitude: "116.71733993155",
      latitude: "38.0491149325971",
    },
    {
      ylt_name: "桑园镇北街村卫生室",
      longitude: "116.403099596455",
      latitude: "37.6493646543217",
    },
    {
      ylt_name: "献县乐康诊所",
      longitude: "116.129363011608",
      latitude: "38.2310520419305",
    },
    {
      ylt_name: "尹庄村卫生室",
      longitude: "117.162775303101",
      latitude: "38.0709634629904",
    },
  ];
  useEffect(() => {
    const scene = new Scene({
      id: "Box3",
      map: new Map({
        center: [116.8357, 38.1041],
        zoom: 6.6,
        maxZoom: 10,
        style: "normal",
        doubleClickZoom: false,
      }),
      logoVisible: false,
    });
    scene.setMapStatus({
      dragEnable: false,
    });
    scene.fitBounds([[115.696, 38.953], [118.023, 37.466]])
    scene.on("loaded", () => {
      const joinedLayer = new PointLayer({
        zIndex: 6,
      })
        .source(joined, {
          parser: {
            type: "json",
            x: "longitude",
            y: "latitude",
          },
        })
        .shape("simple")
        .size(4)
        .color("#37a5ee");
      const pointLayer = new PointLayer({
        zIndex: 5,
      })
        .source(data)
        .shape("name", "text")
        .size(12)
        .color("#fff");
      const filllayer = new PolygonLayer({
        name: "fill",
      })
        .source(data)
        .shape("fill")
        .color("#59689b");
      const linelayer = new LineLayer({
        zIndex: 1,
        name: "line",
      })
        .source(data)
        .shape("line")
        .size(0.5)
        .color("#fff")
        .style({
          opacity: 0.5,
        });
      const hightLayer = new LineLayer({
        zIndex: 4, // 设置显示层级
        name: "hightlight",
      })
        .source({
          type: "FeatureCollection",
          features: [],
        })
        .shape("line")
        .size(2)
        .color("#f7f7f7");
      scene.addLayer(filllayer);
      scene.addLayer(linelayer);
      scene.addLayer(hightLayer);
      scene.addLayer(pointLayer);
      scene.addLayer(joinedLayer);

      filllayer.on("click", (feature) => {
        hightLayer.setData({
          type: "FeatureCollection",
          features: [feature.feature],
        });
      });
    });
  }, []);
  return (
    <div className={styles.box} style={{ position: "relative" }}>
      {hasTitle && <div className={styles.title}>{BOX3_NAME}</div>}
      <div className={styles.main} id="Box3"></div>
    </div>
  );
}
